<template>
  <div class='article-container'>
<!-- 卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
      <!-- 面包屑导航
        https://element.eleme.cn/#/zh-CN/component/breadcrumb#tu-biao-fen-ge-fu -->
        <Breadcrumb>内容管理123</Breadcrumb>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 表单标头 -->
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label="null">全部</el-radio>
            <el-radio label="0">草稿</el-radio>
            <el-radio label="1">待审核</el-radio>
            <el-radio label="2">审核通过</el-radio>
            <el-radio label="3">审核失败</el-radio>
            <el-radio label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>

        <channels v-model="form.channelId" />

        <!-- 日期选择 -->
        <el-form-item label="日期">
          <el-col :span="11">
            <el-date-picker placeholder="选择日期" v-model="form.date1" type='datarange'></el-date-picker>
          </el-col> 

        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="isLoading" @click="hQuery">查询</el-button>
        </el-form-item>
      </el-form>

    </el-card>

    <!-- 表格部分 -->
    <el-card style="margin-top: 20px;">
      <!--表格标头  -->
      <div slot="header" class="clearfix">
        根据筛选条件查询到{{total_count}}条数据：
      </div> 

      <!--表格数据内容  -->
       <el-table
        :data="articles"
        v-loading = "isLoading"
        style="width: 100%">、
        <el-table-column
          prop="cover" 
          label="封面"
        >
            <!-- 自定义模板列：
                1.不需要设置prop
                2.slot-scope='scope'    用来指定在template中可以通过scope来获取当前行的信息
                  scope.row:    表示当前的数据，表示当前一行的数据
                  scope.row.cover.images[0]     表示一行中的封面地址-->
            <template slot-scope='scope'>
                <span>{{ scope.row.cover.images[0] }}</span>
                <el-image style="XXXX" lazy :src='XXXXX行图片内容'>
                    <div slot="placeholder" class='image-slot'>
                        加载中<span class='dot'>...</span>
                    </div>
                </el-image>
            </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
        >
            <!-- status 自定义XXXX(审核)状态 -->
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===0">草稿</el-tag>
          <el-tag v-else-if="scope.row.status===1" type="info">待审核</el-tag>
          <el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag>
          <el-tag v-else-if="scope.row.status===3" type="warning">审核失败</el-tag>
          <el-tag v-else-if="scope.row.status===4" type="danger">已删除</el-tag>
        </template>
        </el-table-column>

        <el-table-column
          prop="pubdate"
          label="发布时间"
        >
        </el-table-column>

        <el-table-column
          prop="address"
          label="操作">
        <template slot-scope="scope">

        <!-- scope.$index表示这一行的索引-->
        <el-button
                   size="mini"
                   icon="el-icon-edit"
                   type="primary"
                   circle
                   @click="hEdit(scope.$index, scope.row)"></el-button>
        <el-button
                   size="mini"
                   type="danger"
                   icon="el-icon-delete"
                   circle
                   @click="hDelete(scope.$index, scope.row)"></el-button>
    </template>
        </el-table-column>
      </el-table>

      <!-- 列表分页 
            total：一共有多少条数据
            background：是否设置背景
            page-size：每页多少条，默认10条
            current-changes事件。当点击页码时，他会触发并会传入当前的页码-->
      <el-pagination
        v-show="total_count>10"
        :disabled="isLoading"
        style="margin-top:10px;"
        layout="prev, pager, next"
        background
        @current-change="hPageChange"
        :total="total_count">
      </el-pagination>
    </el-card>
    </div>
</template>
<script>
import Channels from '@/components/Channel.vue'
// import Breadcrumb from '@/components/Breadcrumb.vue'
import Status from '@/components/status.vue'

export default {
  // 配置表单
  name: 'ArticleIndex',
  components:{
    Channel,
    // Breadcrumb,
    Status
  },
  props: { },
    //表单部分数据
  data () {
    return {
      form: {
          date: '',
          status:null,
          name: '',
          region: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
      },
        isLoading: false, //是否正在加载
        articles:[],  //表格数组
        total_count:0, //当前查询得到的总条数
        curPage:1,
        tableData: [
        // 第一行数据
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // 第二行数据
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
    computed: { },
  
    //调用函数
    created () { 
    this.loadAricles()},
  
methods: {
    //做查询 
    async loadAricles(){
        console.log('做查询');
        let begin_pubdate = null;   
        let end_pubdate = null;
        if(this.form.data) {
        begin_pubdate = this.form.date[0]
        end_pubdata = this.form.date[1]
      }
        const queryObj = {
          page: this.curPage,
          status:this.form.status,
          begin_pubdate:beginPubdate,
          end_pubdate:endPubdata,
          channel_id:this.for.channelId
        }

        //查询请求关联，axios规则   post--data  get--params
        //    this.$http  要对http进行操作
        //       ({get接收    url地址     params要接收的参数})   
        //
        //对于axios来说，在哪里填充入参数：
        //  如果参数要放在请求体中，则要写在data
        //  如果参数要放在请求头中的（get），则要写在 params
        //  如果明确说明参数要放在header中，则要写在  headers
        this.isLoading = true
        try{
        const result = await this.$http({
          method:"GET",
          url:'/mp/v1_0/articles',
          params:{}
    })
        //保存查询的结果
        console.log(result);
        this.list = result.data.data.results
        this.total_count = result.data.data.total_count //总条数
        } catch (err){
        console.log(err)
        this.isLoading = false
        this.$message.error('查询错误')
        this.articles = []
        this.total_count = 0
        this.isLoading = false
  }
}, 

    //操作区数据
    onSubmit () {
      this.loadArticle()
    },
    hEdit (index, row) {
      console.log(index, row)
    },
    
    hDelete (index, row) {
      // 1. 做删除，弹窗提示用户确认
      this.$confirm('你确定要删除吗？')
        .then(async () => {
          // 用户点了确定
          // 2. 获取id，调用接口
          // 经过json-bigint处理之后，id就变成一个对象

          const idStr = row.id.toString()
          try {
            const result = await this.$http({
              url: '/mp/v1_0/articles/' + idStr,
              method: 'DELETE'
            })
            console.log(result)
            // 3. 根据接口的反馈信息做后续处理
            // 如果这个操作不报错误，则可以认为是删除成功，
            // 下面要更新页面，有两种方案
            // (1) 再做一次查询(更加严谨，数据是从后端再次求回来的)
            this.loadArticle()
            // (2) 不做查询，直接删除当前这一行数据(不做查询)
            // this.articles.splice(index, 1)
          } catch (err) {
            this.$message.error('删除失败，目前只能删除草稿！')
          }
        })
        .catch(() => {
          // 用户点了取消
        })
      console.log(index, row)
    },
    hPageChange (curPage) {
      alert(curPage)
  // 更新页码
      this.curPage = curPage
  // 重发请求
      this.loadAricles()
    }
  }
}
</script>
<style scoped>

</style>